﻿
@{
    ViewBag.Title = "环境监测";
}

<div class="row col-md-12 ml-0" style="height:5vh;display:table-cell;vertical-align:middle">
    <strong class="font-rfs" style="margin-right: 1rem;">环境监测</strong>
</div>
<div class="row col-md-12 ml-0 pre-scrollable" style="min-height:90vh;">
    <div class="table-responsive-sm shadow p-0 bg-white rounded col-md-3" style="min-height:90vh;">
        <div class="row col-md-12 tab-content" style="padding-left: 0;padding-right: 0px;right: -15px;height: 3vh;">
            <ul class="nav col-md-12" style="padding-right: 0;margin-bottom: 1px;">
                <li id="li-tabAreaAndLocation" class="tabButton col-md-5 tab-first-active font-rfs" style="text-align:center;padding-left: 1px;padding-right: 1px;" data-active="true">
                    <a id="a-tabAreaAndLocation" data-toggle="tab" href="" class="text-decoration-none" style="display: inline-block;width:100%;">监测区域及位置</a>
                </li>
                <li class="col-md-7 tab-Notactive" style="text-align: center;"><a href="" data-toggle="tab"></a></li>
            </ul>
        </div>
        <div class="row col-md-12 tab-content tab-body" style="padding-right: 0px;right: -15px;padding-left: 0px;top: -2px;min-height: 87vh;">
            <div class="col-md-12 ml-0 mr-0 tab-pane active" style="padding-left: 0px;padding-right: 0px;">
                <div class="row col-md-12" style="margin-left: 0px;padding-left: 1px;height:1vh">
                </div>
                <div class="col-md-12">
                    <ul id="AreaAndLocationTree" class="nav navbar-nav font-rfs"></ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row rounded col-md-9 ml-1" style="min-height:90vh;">
        <div class="row col-md-12 tab-content" style="padding-left: 0;padding-right: 0px;right: -15px;height: 3vh;">
            <ul class="nav col-md-12" style="padding-right: 0;margin-bottom: 1px;">
                <li id="li-Link" class="tabButton col-md-1 tab-first-active font-rfs" style="text-align:center;padding-left: 1px;padding-right: 1px;" data-active="true">
                    <a id="a-Link" href="" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;">关联信息</a>
                </li>
                <li class="col-md-11 tab-Notactive" style="text-align: center;"><a href="" data-toggle="tab"></a></li>
            </ul>
        </div>
        <div class="row col-md-12 tab-content tab-body" style="padding-right: 0px;right: -15px;padding-left: 0px;top: -2px;min-height: 87vh;">
            <div class="col-md-12 ml-0 mr-0 tab-pane active" id="tabInventoryInfo" style="padding-left: 0px;padding-right: 0px;">
                <div class="row col-md-12" style="height:1vh"></div>
                <ul class="nav col-md-12" style="margin-bottom: 1px;padding-right: 0px;">
                    <li class="tabButton col-md-1 tab-other-active font-rfs" style="text-align: center;padding-left: 1px;padding-right: 1px;height:3vh;" data-active="false">
                        <a href="" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;">监测标准</a>
                    </li>
                    <li class="col-md-11 tab-Notactive" style="text-align: center;height:3vh;"><a href="" data-toggle="tab"></a></li>
                </ul>
                <div class="table-responsive-sm p-0 bg-white rounded col-md-12 pre-scrollable" style="min-height:10vh;padding-right: 0px;margin-left: 0px;border-bottom: 1px solid #a8bfde;margin-bottom: 5px;">
                    <table id="tabMonitoring" class="table table-striped table-bordered table-sm table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>类型</th>
                                <th>描述</th>
                                <th>温度高限</th>
                                <th>温度低限</th>
                                <th>湿度高限</th>
                                <th>湿度低限</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <ul class="nav col-md-12" style="margin-bottom: 1px;padding-right: 0px;">
                    <li class="tabButton col-md-1 tab-other-active font-rfs" style="text-align: center;padding-left: 1px;padding-right: 1px;height:3vh;" data-active="false">
                        <a href="" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;">监测记录</a>
                    </li>
                    <li class="col-md-11 tab-Notactive" style="text-align: center;height:3vh;"><a href="" data-toggle="tab"></a></li>
                </ul>
                <div class="row col-md-12" style="min-height:5vh;">
                    <button id="AddMonitoring" class="btn btn-rfs" title="添加监测记录"><i class="bi-plus-square" style="color:#007bff"></i> 添加</button>
                    <label id="AreaAndLocationText" class="btn btn-rfs"></label>
                </div>
                <div class="table-responsive-sm p-0 bg-white rounded col-md-12 pre-scrollable" style="height:66vh;">
                    <table id="tabMonitoringRecord" class="table table-striped table-bordered table-sm table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>状态</th>
                                <th>温度</th>
                                <th>湿度</th>
                                <th>记录人</th>
                                <th>记录时间</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="AreaAndLocation-Add-Modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p id="AreaAndLocation-Add-Modal-Title" class="pt-3 pl-3 font-rfs"></p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <div class="col-3 pr-0">
                        <span class="input-group-text font-rfs border-radius-noright noRightBorder">温度*</span>
                    </div>
                    <div class="col-9 pl-0">
                        <input id="AreaAndLocation-Add-Modal-Temperature" class="form-control font-rfs border-radius-noleft" />
                    </div>
                </div>
                <div class="input-group">
                    <div class="col-3 pr-0">
                        <span class="input-group-text font-rfs border-radius-noright noRightBorder">湿度*</span>
                    </div>
                    <div class="col-9 pl-0">
                        <input id="AreaAndLocation-Add-Modal-Humidity" class="form-control font-rfs border-radius-noleft" />
                    </div>
                </div>
                <div class="text-right">
                    <button id="AreaAndLocation-Add-Modal-confirm" class="btn btn-primary font-rfs" data-IsArea="true">确定</button>
                    <button id="AreaAndLocation-Add-Modal-cancel" data-dismiss="modal" type="button" class="btn btn-info font-rfs">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        var TreeNodeId = '';
        $(document).ready(function () {
            LoadTree();
        });

        function LoadTree() {
            $.post("GetEnvAreaAndLocation", {
                // 参数
            }, function (list) {
                $("#AreaAndLocationTree").empty();
                TreeNodeId = '';
                list.forEach(function (value, index, list) {
                    var re = new RegExp('-', 'g');
                    if (value.isArea == true) {
                        $("#AreaAndLocationTree").append("<li class='nav-item' href='#A" + value.id.replace(re, '') + "' data-toggle='collapse' aria-expanded='false' data-nodeid='" + value.id + "'data-isArea='" + value.isArea + "' onclick='Nodeclick(this)'><a><p><i class='bi-building' style='padding-right: 4px;color: #007bff;'></i>" + value.type + "：" + value.name + "</p></a></li>");
                    } else {
                        $("#AreaAndLocationTree").append("<li class='nav-item' href='#A" + value.id.replace(re, '') + "' data-toggle='collapse' aria-expanded='false' data-nodeid='" + value.id + "'data-isArea='" + value.isArea + "' onclick='Nodeclick(this)'><a><p><i class='bi-geo-alt' style='padding-right: 4px;color: #007bff;'></i>" + value.type + "：" + value.name + "</p></a></li>");
                    }
                });
            });
        };

        function Nodeclick(obj) {
            TreeNodeId = $(obj).attr('data-nodeid');
            LoadMonitoring();

            $("#AreaAndLocationTree").find("li").each(function () {
                $(this).removeClass('TreeLiBackColor');
            });
            $(obj).addClass("TreeLiBackColor");

            LoadMonitoringRecord();
            LoadText();
        };

        function LoadMonitoring() {
            var columns = [{ field: "id", visible: false }, { field: "name" }, { field: "type" }, { field: "description" }, { field: "highTemperature" },
            { field: "lowTemperature" }, { field: "highHumidity" }, { field: "lowHumidity" }];

            $('#tabMonitoring').bootstrapTable('destroy'); // 这行代码必须加，否则数据无法刷新
            $('#tabMonitoring').bootstrapTable({
                method: 'post',
                url: "GetMonitoringByAreaAndLocationId",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
                queryParams: function (params) {
                    var data = {
                        AreaAndLocationId: TreeNodeId
                    };
                    return data;
                },
                dataField: "rows",
                uniqueId: "id",          // 设置主键
                locale: "zh-CN",
                columns: columns,
                onClickRow: function (row, $element, field) {
                    $("#tabMonitoring").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");
                },
                silent: true,
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    $('#tabMonitoring').bootstrapTable('removeAll');
                },
                onLoadSuccess: function (data) {
                    SetBootstrapStyle();
                },
                formatShowingRows: function (pageFrom, pageTo, totalRows) {
                    // return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
                },
                formatRecordsPerPage: function (pageNumber) {
                    return " 每页显示" + pageNumber + '条记录';
                }
            });
        }

        function setDate(value, row, index) {
            if (value != null)
                return value.replace('T',' ');
        }

        function SetStatus(value, row, index) {
            var strHtml = "-";
            if (value == true) {
                strHtml = "<i class='bi-award-fill' style='color:forestgreen'></i>";
            }
            if (value == false) {
                strHtml = "<i class='bi-award-fill' style='color:red'></i>";
            }
            return strHtml;
        }

        function SetTemperature(value, row, index) {
            var strHtml = value;
            if (row.temStatus == "高") {
                strHtml = "<label style='color:red'>" + value + "</label>";
            }
            if (row.temStatus == "低") {
                strHtml = "<label style='color:#007bff'>" + value + "</label>";
            }
            return strHtml;
        }

        function SetHumidity(value, row, index) {
            var strHtml = value;
            if (row.humStatus == "高") {
                strHtml = "<label style='color:red'>" + value + "</label>";
            }
            if (row.humStatus == "低") {
                strHtml = "<label style='color:#007bff'>" + value + "</label>";
            }
            return strHtml;
        }

        function LoadMonitoringRecord() {
            var columns = [{ field: "id", visible: false }, { field: "status", width: "5%", align: "center", formatter: SetStatus },
            { field: "temperature", formatter: SetTemperature }, { field: "humidity", formatter: SetHumidity },
            { field: "recordPersonName" }, { field: "recordTime", formatter: setDate }];

            $('#tabMonitoringRecord').bootstrapTable('destroy'); // 这行代码必须加，否则数据无法刷新
            $('#tabMonitoringRecord').bootstrapTable({
                method: 'post',
                url: "GetRecordByAreaAndLocationId",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
                queryParams: function (params) {
                    var data = {
                        AreaAndLocationId: TreeNodeId,
                        limit: params.limit, // 每页显示多少条记录
                        offset: params.offset // 偏移量
                    };
                    return data;
                },
                queryParamsType: "limit", // 服务器端分页，这个参数必需是“limit”
                dataField: "rows",

                uniqueId: "id",          // 设置主键
                sidePagination: "server", // 服务器端分页，这个参数必需设置
                pagination: true,  // 显示分页条,设为true，启用了分页功能
                pageNumber: 1,
                pageSize: 20,   // 默认页大小
                pageList: [10, 20, 30, 50],  // 控制每页数目
                locale: "zh-CN",
                columns: columns,

                selectItemName: "selectItem", // 指定选择行ID
                clickToSelect: true, // 相应单击，自动选中此行
                checkboxHeader: true, // 标题行显示全选按钮

                onClickRow: function (row, $element, field) {
                    $("#tabMonitoringRecord").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");
                },
                silent: true,
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    $('#tabMonitoringRecord').bootstrapTable('removeAll');
                },
                onLoadSuccess: function (data) {
                    SetBootstrapStyle();
                },
                formatShowingRows: function (pageFrom, pageTo, totalRows) {
                    return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
                },
                formatRecordsPerPage: function (pageNumber) {
                    return " 每页显示" + pageNumber + '条记录';
                }
            });
        }

        function LoadText() {
            $.post("GetAreaAndLocationText", {
                AreaAndLocationId: TreeNodeId
            }, function (data) {
                $("#AreaAndLocationText").html("所在位置：" + data);
            });
        }

        $("#AddMonitoring").click(function () {
            if (TreeNodeId.length == 0) {
                alert("请先选择需要添加环境监测记录的区域位置！");
                return;
            }
            $("#AreaAndLocation-Add-Modal-Title").text("添加环境监测记录");

            $("#AreaAndLocation-Add-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });
        });

        $("#AreaAndLocation-Add-Modal-confirm").click(function () {
            if ($.trim($("#AreaAndLocation-Add-Modal-Temperature").val()).length == 0) {
                alert("温度不能为空！");
                $("#AreaAndLocation-Add-Modal-Temperature").addClass('error-style');
                return false;
            }
            if ($.trim($("#AreaAndLocation-Add-Modal-Humidity").val()).length == 0) {
                alert("温度不能为空！");
                $("#AreaAndLocation-Add-Modal-Humidity").addClass('error-style');
                return false;
            }

            var jsonStr = {};
            jsonStr["AreaAndLocationId"] = TreeNodeId;
            jsonStr["Temperature"] = $.trim($("#AreaAndLocation-Add-Modal-Temperature").val());
            jsonStr["Humidity"] = $.trim($("#AreaAndLocation-Add-Modal-Humidity").val());

            $.post("CreateMonitoringRecord", {
                jsonStr: JSON.stringify(jsonStr)
            }, function (data) {
                if (data.indexOf("成功") >= 0) {
                    LoadMonitoringRecord();
                    $("#AreaAndLocation-Add-Modal-cancel").click();
                } else {
                    alert(data);
                }
            });
        });

//********************************************************************************

        $("#li-Link").hover(
            function () {
                if ($(this).attr("class").indexOf('tab-first-active') > 0) {
                    $(this).addClass('tab-enter-mouse');
                }
            },
            function () {
                $(this).removeClass('tab-enter-mouse');
                $(this).removeClass('tab-first-noactive-mouse');

                if ($(this).attr("data-active") == 'true') {
                    $(this).addClass('tab-first-active');
                }
                if ($(this).attr("data-active") == 'false') {
                    $(this).addClass('tab-first-noactive');
                }
            });

        $("#li-tabAreaAndLocation").hover(
            function () {
                if ($(this).attr("class").indexOf('tab-first-active') > 0) {
                    $(this).addClass('tab-enter-mouse');
                }
            },
            function () {
                $(this).removeClass('tab-enter-mouse');
                $(this).removeClass('tab-first-noactive-mouse');

                if ($(this).attr("data-active") == 'true') {
                    $(this).addClass('tab-first-active');
                }
                if ($(this).attr("data-active") == 'false') {
                    $(this).addClass('tab-first-noactive');
                }
            });

    </script>
}
